<template>
  <div class="app-container">
    <div class="card_title" >心脑内科DRG病组分析与成本分析</div>
    <div class="subtitle">基于2023年1月-12月数据统计分析</div>
    <div class="flex justify-content-space-between align-center" style="position: relative">
      <div style="margin-top: 10px;">
        <el-button :type="selectedButton === '本周' ? 'primary' : ''" @click="handleButtonClick('本周')">本周</el-button>
        <el-button :type="selectedButton === '本月' ? 'primary' : ''" @click="handleButtonClick('本月')">本月</el-button>
        <el-button :type="selectedButton === '全年' ? 'primary' : ''" @click="handleButtonClick('全年')">全年</el-button>
      </div>
      <div class="flex align-center">
        <div style="margin: 0 10px;">选择日期范围</div>
        <el-date-picker v-model="dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD 00:00:00" placeholder="请选择时间"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        type="daterange"></el-date-picker>
        <el-button type="primary" style="margin: 0 10px">查询</el-button>
      </div>
    </div>

    <el-row :gutter="20" style="margin-top: 20px">
        <el-col v-for="(card, index) in cardList" :key="index" style="position: relative;" :xs="24" :sm="12" :md="12" :lg="6">
          <el-card class="padding-top-bottom-16 padding-20" style="background-color: white">
            <div class="flex justify-content-space-between card-item">
              <div class="title">{{ card.title }}</div>
              <div class="flex align-center" :class="card.status" style="font-size: 14px">
                <img alt="" class="icon" :src="card.icon">
                <div style="margin-left: 5px">{{ card.num }}</div>
              </div>
            </div>
            <div class="count">{{ card.count }}</div>
            <div class="analyze"> {{ card.analyze }}</div>
          </el-card>

        </el-col>
      </el-row>

    <!--  两列图表 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col  :xs="24" :sm="24" :md="12" :lg="12" style="margin-top: 20px;position: relative">
        <EchartsComponent  :options="chartOptions[1]" class="charts-common flex-auto">
          <div style="position: absolute;top: -10px;right:0;z-index: 10">
            <el-button type="selectedButton === '本周' ? 'primary' : 'info'" @click="handleButtonClick('本周')">实际费用</el-button>
            <el-button type="selectedButton === '本月' ? 'primary' : 'info'" @click="handleButtonClick('本月')">标化费用</el-button>
          </div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent   :options="chartOptions[0]" class="charts-common flex-auto">
          <div style="position: absolute;top: -10px;right:0;z-index: 10">
            <el-button type="selectedButton === '本周' ? 'primary' : 'info'" @click="handleButtonClick('本周')">月度</el-button>
            <el-button type="primary" @click="handleButtonClick('本月')">季度</el-button>
          </div>
        </EchartsComponent>
      </el-col>
    </el-row>
 <div>

 </div>

    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
        <el-row :gutter="20">
          <el-col :xs="9" :sm="12" >
            <div class="sub-title">DRG分组详情</div>
          </el-col>
          <el-col :xs="15" :sm="12">
            <div class="flex align-center justify-content-end">
              <el-input v-model="search" placeholder="搜索病区" style="width:250px"></el-input>
              <el-button type="primary" icon="download" style="margin: 0 10px">导出数据</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table :data="tableData"  style="width: 100%;margin-top: 10px;padding-bottom: 20px">
          <el-table-column align="center" prop="name" label="病区名称">
          <template #default="scope">
          <span style="font-weight: bolder">{{scope.row.name}}</span>
          </template>
          </el-table-column>

          <el-table-column align="center" prop="num" label="入组并例数" />
          <el-table-column align="center" prop="drg" label="DRG组数" />
          <el-table-column align="center" prop="cost1" label="例均实际费用（元）"/>
          <el-table-column align="center" prop="status" label="例均费用同比变化" />
          <el-table-column align="center" prop="cmi" label="CMI" />
          <el-table-column align="center" prop="cost2" label="例均标化费用（元）" />
          <el-table-column align="center" prop="pay" label="支付总差异" />
        </el-table>
       <div style="position:relative; padding-bottom: 20px">
         <pagination
             :total="Number(tableData.length)"
             v-model:page="cancerIndicator.skipCount"
             v-model:limit="cancerIndicator.maxResultCount"
             @pagination="getCancerIndicatorList" />
       </div>
      </el-card>
    </div>

  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const selectedButton = ref('全年');
const dateRange = ref(null);
const search = ref(null);
const handleButtonClick = (buttonType) => {
  selectedButton.value = buttonType;
};
const cardList = ref([
  {
    title: '入组病例数',
    count: 1284,
    icon: new URL('@/assets/static/上升趋势.png', import.meta.url).href,
    analyze: '同比增加143例',
    status: 'increase',
    num: "12.5%",
  }, {
    title: 'DRG组数',
    count: 38,
    icon: new URL('@/assets/static/下转患者数.png', import.meta.url).href,
    analyze: '较上月新增2个病组',
    status: 'flat',
    num: "环比+2",
  }, {
    title: 'CMI值',
    count: '1.28',
    icon: new URL('@/assets/static/手术台次数.png', import.meta.url).href,
    analyze: '全院排名第4',
    status: 'flat',
    num: "B级",
  },
  {
    title: '例均实际费用',
    count: '￥1200',
    icon: new URL('@/assets/static/下降趋势.png', import.meta.url).href,
    analyze: '同比减少￥706',
    num: "5.2",
    status: 'decrease'
  }
]);
const chartOptions = ref([
  {
    // 标题配置，可根据需求添加
    title: {
      text: '例均标化费用对比',
      left: 'left'
    },
    // tooltip 提示框，鼠标悬浮显示数据
    tooltip: {
      trigger: 'axis',
      axisPointer: {type: 'shadow'}
    },
    // 图例，标识不同病区系列
    legend: {
      data: ['心内科一病区', '心内科二病区', '神经内科一病区', '神经内科二病区', '心脑联合病区'],
      left: 'right',
      orient: 'vertical',
      right: 0,
      top: 'center',

    },
    grid: {
      left: '3%',
      right: '18%',
      bottom: '3%',
      top: '19%',
      containLabel: true
    },

    // x 轴配置，类别为 Q1 - Q4
    xAxis: {
      type: 'category',
      data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    // y 轴配置，表示费用，单位元
    yAxis: {
      type: 'value',
      name: '费用(元)'
    },
    // 系列数据，每个病区对应不同颜色，值为各季度费用
    series: [
      {
        name: '心内科一病区',
        type: 'bar',
        data: [12000, 12000, 12000, 12000], // 示例数据，需替换为实际值
        itemStyle: {
          color: '#5793f3' // 对应图例颜色，可调整
        }
      },
      {
        name: '心内科二病区',
        type: 'bar',
        data: [13000, 13000, 13000, 13000], // 示例数据，需替换为实际值
        itemStyle: {
          color: '#f7a35c'
        }
      },
      {
        name: '神经内科一病区',
        type: 'bar',
        data: [15000, 15000, 15000, 15000], // 示例数据，需替换为实际值
        itemStyle: {
          color: '#d9534f'
        }
      },
      {
        name: '神经内科二病区',
        type: 'bar',
        data: [15000, 15000, 15000, 15000], // 示例数据，需替换为实际值
        itemStyle: {
          color: '#90c4e4'
        }
      },
      {
        name: '心脑联合病区',
        type: 'bar',
        data: [15000, 15000, 15000, 15000], // 示例数据，需替换为实际值
        itemStyle: {
          color: '#8dca7d'
        }
      }
    ]
  },
  {
    title: {
      text: '例均费用年度趋势',
      left: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: function (params) {
        let result = `<div style="font-weight:bold;">${params[0].name}</div>`;
        params.forEach(item => {
          result += `<div>${item.seriesName}: ${item.value.toLocaleString()} 元</div>`;
        });
        return result;
      }
    },
    legend: {
      data: ['例均实际费用', '例均标化费用'],
      left: 'center'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      name: '费用(元)',
      min: 11000,
      max: 15000,
      interval: 500
    },
    series: [
      {
        name: '例均实际费用',
        type: 'line',
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#327ab7',
          width: 2
        },
        itemStyle: {
          color: '#327ab7'
        },
        data: [14000, 13500, 13200, 13000, 12800, 12600, 12500, 12400, 12300, 12200, 12100, 12000]
      },
      {
        name: '例均标化费用',
        type: 'line',
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#d9534f',
          width: 2
        },
        itemStyle: {
          color: '#d9534f'
        },
        data: [13500, 13300, 13100, 13000, 12900, 12700, 12600, 12500, 12400, 12300, 12200, 12100]
      },
      {
        name: '费用差异区间',
        type: 'line',
        data: [14000, 13500, 13200, 13000, 12800, 12600, 12500, 12400, 12300, 12200, 12100, 12000],
        lineStyle: {
          opacity: 0
        },
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              {offset: 0, color: 'rgba(50, 122, 183, 0.2)'}, // 例均实际费用颜色渐变起点
              {offset: 1, color: 'rgba(217, 83, 79, 0.2)'}   // 例均标化费用颜色渐变终点
            ]
          }
        },
        z: -1
      },
      {
        name: '费用差异区间',
        type: 'line',
        data: [13500, 13300, 13100, 13000, 12900, 12700, 12600, 12500, 12400, 12300, 12200, 12100],
        lineStyle: {
          opacity: 0
        },
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              {offset: 0, color: 'rgba(217, 83, 79, 0.2)'}, // 例均标化费用颜色渐变起点
              {offset: 1, color: 'rgba(50, 122, 183, 0.0)'}   // 完全透明终点
            ]
          }
        },
        z: -1
      }
    ]
  }
]);
const tableData = ref([
  {
    name: '心内科一病区',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '1.32',
    cost2: '12876',
    pay: '+￥369'
  },
  {
    name: '心内科二病区',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↑6.8%',
    cmi: '1.62',
    cost2: '12876',
    pay: '+￥169'
  },
  {
    name: '神经内科一病区',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↑6.8%',
    cmi: '4.32',
    cost2: '12876',
    pay: '-￥319'
  },
  {
    name: '神经内科二病区',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '1.72',
    cost2: '12876',
    pay: '+￥219'
  },{
    name: '神经内科二病区',
    num: 328,
    drg: 12,
    cost1: 13245,
    status: '↓6.8%',
    cmi: '2.2',
    cost2: '12876',
    pay: '-￥239'
  },
]);
// 肿瘤专业医疗质量控制指标
const cancerIndicator = ref(
    {
      date: '', //时间
      disease: '', // 病种
      skipCount: 1, // 当前页
      maxResultCount: 10 // 一页的数据量
    });
// 获取肿瘤专业医疗质量控制指标列表
const getCancerIndicatorList = (pageData) => {
  console.log("page",cancerIndicator.value)
};
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-col{
     padding: 0;
  }
  .box-card {
    margin-top: 20px;
  }

  .card_title {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .subtitle {
    font-size: 16px;
    font-weight: normal;
    color: #636A76;
    margin-top: 10px;
  }

  .card-item {
    font-size: 18px;
    color: #464646;
  }

  .el-card {
    border: none;
    border-radius: 10px;

    .icon {
      height: 14px;
    }

    .count {
      color: #464646;
      font-size: 26px;
      font-weight: 600;
      padding: 10px 0;
    }

    .analyze {
      font-size: 16px;
      color: #8F95A1;
    }

    .increase {
      color: #306339;
      background-color: #E2FBE8;
      border-radius: 5px;
      padding: 5px 10px;
    }

    .flat {
      color: #263FA9;
      background-color: #DEE9FC;
      border-radius: 5px;
      padding: 5px 10px;
    }

    .warn {
      color: #7D501F;
      background-color: #FDF9C9;
      border-radius: 5px;
      padding: 5px 10px;
    }

    .decrease {
      color: #8C2822;
      background-color: #F9E3E2;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }

  .charts-common {
    height: 340px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
